<template>
	<view class="body">
		<view style="width: 100%; box-shadow: 1px 1px 30px #eeeeee;" class="section">
			<view
					class="search-content ss-flex ss-col-center ss-row-between"
					@tap="click"
					:style="[
      {
        borderRadius: radius + 'px',
        background: elBackground,
        height: height + 'px',
        width: width,
      },
    ]"
					:class="[{ 'border-content': navbar }]"
			>
				<view class="ss-flex ss-col-center" v-if="navbar">
					<view class="search-icon _icon-search ss-m-l-10" :style="[{ color: props.iconColor }]"></view>
					<view class="search-input ss-flex-1 ss-line-1" :style="[{ color: fontColor, width: width }]">
						{{ placeholder }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

import {reactive} from 'vue';
import sheep from '@/sheep';

// 组件数据
  const state = reactive({
    searchVal: '',
  });

  // 事件页面
  const emits = defineEmits(['click']);

  // 接收参数
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    // 输入框背景色
    elBackground: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: 36,
    },
    // 图标颜色
    iconColor: {
      type: String,
      default: '#b0b3bf',
    },
    // 字体颜色
    fontColor: {
      type: String,
      default: '#b0b3bf',
    },
    // placeholder
    placeholder: {
      type: String,
      default: '搜索您要找的分类（日文匹配）',
    },
    radius: {
      type: Number,
      default: 10,
    },
    width: {
      type: String,
      default: '100%',
    },
    navbar: {
      type: Boolean,
      default: true,
    },
  });

  // 点击
  const click = () => {
    emits('click');
  };
</script>

<style lang="scss" scoped>

.body {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	display: flex; /* 使用flex布局 */
	justify-content: space-between; /* 使元素平均分布 */
	align-items: center; /* 居中对齐元素 */
	opacity: 1;

	.icon {
		width: 34px; /* 图标宽度 */
		height: 34px; /* 图标高度 */
	}

	.section {
		display: flex; /* 同样使用flex布局 */
		align-items: center; /* 居中对齐元素 */
	}

	.border-content {
		border: 2rpx solid #eee;
	}
	.search-content {
		width: 100%;
		height: 35px;
		opacity: 1;
		border-radius: 10px;
		background: #FFFFFF;

		border: 1px solid #000000;
		flex: 1;
		// height: 80rpx;
		position: relative;
		.search-icon {
			font-size: 38rpx;
			margin-right: 20rpx;
		}
		.keyword-link {
			position: absolute;
			right: 16rpx;
			top: 18rpx;
		}

		.search-input {
			font-size: 28rpx;
		}
	}
}


</style>
